<template>
	<view class="home">
		<view class="header">
			<view class="change" v-if="show" @click="show = !show">普通话</view>
			<view class="change" v-else @click="show = !show">粤语</view>
		</view>
		<view class="title">
			<view class="input">
				<u--input placeholder="请输入内容" border="surround" v-model="value" prefixIcon="search"
					prefixIconStyle="color: #909399" @confirm="submit">
				</u--input>
				<view class="icon">
					<u-icon name="mic" @click="getVoice()"></u-icon>
				</view>
			</view>
		</view>
		<u-gap height="40" bgColor="#fff"></u-gap>
		<view class="main">
			<text>
				热门搜索
			</text>
			<view class="hot">
				<view class="item" v-for="(item,index) in list" @click="select(index)">
					{{item.text}}
				</view>
			</view>
		</view>
		<u-popup :show="show2" @close="close" @open="open" :round="10">
			<view>
				<view class="voice">
					<button type="default" @tap="">{{voice.text}}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				username: "",
				show: true,
				show2: false,
				list: [{
						"text": "你好"
					},
					{
						"text": "早上好"
					},
					{
						"text": "今天吃什么"
					},
					{
						"text": "王丁辉能不能死一死"
					},
					{
						"text": "今天学习了吗"
					}
				],
				voice: {
					text: "长按录音",
				}
			};
		},
		onShow() {
			this.username = uni.getStorageSync('username')
		},
		methods: {
			select(index) {
				this.value = this.list[index].text
				uni.navigateTo({
					url: `../item/item?text=${this.value}&type=${this.show}`
				})
			},
			submit() {
				if (this.value != "") {
					uni.navigateTo({
						url: `../item/item?text=${this.value}&type=${this.show}`
					})
				}
			},
			getVoice() {
				this.show2 = true
			},
			change() {
				this.show = !this.show
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show2 = false
				// console.log('close');
			},
			press() {

			}
		}

	}
</script>

<style lang="scss">
	.home {
		text-align: center;

		.header {
			height: 20px;

			.change {
				float: right;
				width: 50px;
				text-align: center;
				margin-right: 30rpx;
				height: 20px;
				line-height: 20px;
				margin-top: 20px;
				padding: 5px 10px;
				font-size: 13px;
				background-color: #C0C4CC;
				border: #303133 3rpx solid;
				border-radius: 20px;
			}
		}

		.title {
			margin-top: 50px;
			padding: 0 30rpx;

			.input {
				margin: 10px 30rpx;
				display: flex;
				height: 40px;

				.icon {
					margin: auto 0 auto 20rpx;
				}
			}

		}

		.main {
			margin: 10px 30rpx;
			text-align: left;

			.hot {
				margin-top: 20px;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;

				.item {
					width: 30%;
					height: 40px;
					text-align: center;
					line-height: 40px;
					// background-color: #007AFF;
					margin: 0 10rpx 20px 10rpx;

					font-size: 10px;
					border-radius: 20px;
					border: #000 2rpx solid;

				}
			}
		}
	}
	.voice {
		height: 30px;
		padding: 150px 30px;
	
	}
</style>
